<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>注册</span>
        <el-button link type="primary">点此登录</el-button>
      </div>
    </template>
    <!-- 表单 -->
    <el-form status-icon label-width="100px" class="demo-ruleForm">
      <el-form-item label="用户名" prop="userName">
        <el-input></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPass">
        <el-input type="password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="qq邮箱" prop="email">
        <el-input></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="code">
        <el-input style="width: 120px"></el-input>
        <el-button class="btnVerification" type="primary"></el-button>
      </el-form-item>
      <!-- 按钮 -->
      <el-form-item class="btn">
        <el-button class="btnRegister" type="warning" round>注册</el-button>
        <el-button class="btnReset" type="info" round>重置</el-button>
      </el-form-item>
    </el-form>
    <div class="deadline">———————— 双创中心 ————————</div>
  </el-card>
</template>

<script></script>

<style lang="scss" scoped>
.card-header {
  font-size: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fe7300;
}

.box-card {
  width: 500px;
  height: 500px;
  // margin-left: 30%;
  // margin-top: 8%;
  text-align: center;
  // background: url('../assets/images/background.jpg');
  background-size: cover;
}

.demo-ruleForm {
  padding-right: 40px;
}
.btn {
  margin-left: 20px;
}

.deadline {
  color: #bfbfbf;
  padding-top: 10px;
}

.btnVerification {
  margin-left: 50px;
  width: 100px;
}
.btnRegister {
  height: 40px;
  width: 100px;
  margin-top: 20px;
}
.btnReset {
  margin-top: 20px;
  height: 40px;
  width: 100px;
}
// .el-card ::v-deep .el-card__header {
//   background-color: palegoldenrod;
// }
// .el-card ::v-deep .el-card__body {
//   background-color: powderblue;
//   height: 100%;
// }
</style>
